<template>
    <div id="echartsDiv">
      <div :id="id" :style="{width: width, height: height}" ref="echartsView"></div>
    </div>
</template>

<script>
import echarts from "echarts"
import report from "../../api/apis/report/report"
// eslint-disable-next-line no-unused-vars
import westeros from "../../components/ECharts/theme/westeros"

export default {
  name: "reportFlow",
  props: {
    id: {
      type: String,
      default: "myChart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data () {
    return {
      chart: null,
      date: [],
      data: []
    }
  },
  mounted () {
    this.loadData()
    this.selfAdaption()
  },
  methods: {
    // echart自适应
    selfAdaption () {
      let that = this
      setTimeout(() => {
        window.onresize = function () {
          if (that.chart) {
            that.chart.resize()
          }
        }
      }, 10)
    },
    dateToStr (date) {
      let year = date.getFullYear()
      let month = date.getMonth()
      let day = date.getDate()
      return year + "-" + ((month + 1) > 9 ? (month + 1) : ("0" + (month + 1))) + "-" + (day > 9 ? day : ("0" + day))
    },
    addDate (date, days) {
      date.setDate(date.getDate() + days)
      return new Date(date)
    },
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id), "westeros")

      this.chart.setOption({
        tooltip: {
          // 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
          trigger: "axis",
          // 提示框的位置
          position: function (pt) {
            return [pt[0], "10%"]
          },
          formatter: "{b} 订单数: {c}"
        },
        // toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
        toolbox: {
          // feature 各工具配置项: dataZoom 数据区域缩放;restore 配置项还原;saveAsImage下载为图片;magicType动态类型切换
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category", // category为一级分类,适用于离散的类目数据
          boundaryGap: false, // 无间隙
          data: this.date
        },
        yAxis: {
          type: "value", // 'value' 数值轴，适用于连续数据。
          boundaryGap: [0, "100%"] // 分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，
        },
        dataZoom: [
          {// 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
            type: "inside",
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10, // handleIcon 手柄的 icon 形状，支持路径字符串
            handleIcon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%", //  控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
            handleStyle: {
              color: "pink",
              shadowBlur: 3, // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
              shadowColor: "red",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            type: "line",
            smooth: true, // 开启平滑处理。true的平滑程度相当于0.5
            symbol: "none", // 标记的图形。
            sampling: "average", //  取过滤点的平均值
            itemStyle: {
              normal: {
                color: "rgb(255, 70, 131)" //  图形的颜色。
              }
            },
            areaStyle: { // 区域填充样式。
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgb(255, 158, 68)"
                }, {
                  offset: 1,
                  color: "rgb(255, 70, 131)"
                }])
              }
            },
            data: this.data
          }
        ]
      })
    },
    loadData () {
      report.fetchGetFlow().then((res) => {
        let date = []
        let baseData = []
        for (let flow of res.data.data) {
          baseData.push({"date": flow.ordertime, "count": flow.count})
        }
        let data = []
        let beginDate = new Date(res.data.data[0].ordertime)
        let endDate = new Date(res.data.data[res.data.data.length - 1].ordertime)
        let days = endDate - beginDate
        let daysCount = parseInt(days / (1000 * 60 * 60 * 24))
        let index = 0
        for (let i = 0, now = beginDate; i <= daysCount; i++, now = this.addDate(now, 1)) {
          date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"))
          if (baseData[index].date === this.dateToStr(now)) {
            data.push(baseData[index].count)
            index++
          } else {
            data.push(0)
          }
        }
        this.date = date
        this.data = data
        this.initChart()
      })
    }
  }
}
</script>

<style scoped>
#echartsDiv{
  height: 100%;
}
</style>
